<template>
	<view class="order-list">
		<wyb-tabs class="tabs" :tabs="tabs" :current="currentTab" :s-block-mode="'auto'" :active-color="'#E9C846'" :scroll="true" @change="tabChange" />
		<mescroll-uni
			class="scroll"
			ref="mescrollRef"
			@init="mescrollInit"
			top="80"
			@down="downLoad"
			:down="{
				auto: false
			}"
			:up="{
				auto: false,
				textNoMore: '没有更多'
			}"
			@up="upLoad"
		>
			<!-- 	<scroll-view class="scroll" :scroll-y="true" v-if="currentTab != 5"> -->
			<view class="order-card-list" v-if="currentTab != 5">
				<container
					class="content"
					:isFixed="false"
					:isNoData="isOrderNodata"
					:isLoading="orederLoading"
					@btnClick="getOrderList"
					:nodataOption="{
						type: 'hasbtn',
						iconBottom: '40rpx',
						text: '无数据',
						btnText: '刷新'
					}"
				>
					<view class="order-card" v-for="item in orderList" :key="item.id">
						<view class="head">
							<view class="order-info" @click="checkOrderDetail(item)" >
								<text class="num" >编号 : {{ item.orderNo }}</text>
								<text class="date">时间 : {{ item.createTime }}</text>
							</view>
							<view class="status" @click="checkOrderDetail(item)" >{{ getOrderStatusText(item.orderState) }}</view>
						</view>
						<view class="body">
							<!-- <navigator class="good-item" :url="'/pages/goods/goods?id='+goodItem.id+'name=' + goodItem.goodsName" hover-class="none" :key="goodItem.id" v-for="(goodItem, index) in item.goodsList"> -->
							<view class="good-item" :key="goodItem.id" v-for="(goodItem, index) in item.goodsList">
								<goods-item
									type="cross"
									:name-size="36"
									:name-row-num="2"
									:good-num="goodItem.buyCount"
									:img="imgHost + goodItem.goodsPic"
									:img-width="'150rpx'"
									:img-height="'200rpx'"
									:price="goodItem.goodsPrise"
									:name="goodItem.goodsName"
								></goods-item>
							</view>
							<!-- </navigator> -->
						</view>
						<view class="foot">
							<view class="numerical">
								<text class="total">共{{ item.goodsCounts }}件商品</text>
								<view class="sumpay">
									<text class="label">支付总额:</text>
									<text class="symbol">¥</text>
									<text class="num">{{ item.orderPrice }}</text>
								</view>
							</view>
							<button class="btn btn-orange-line pay-btn" v-if="item.orderState == 0" @click="goToPay(item)">立即支付</button>
							<button class="btn btn-orange-line check-btn" v-else @click="checkOrderDetail(item)">查看详情</button>
						</view>
					</view>
				</container>
			</view>
			<!-- </scroll-view> -->
			<!-- <scroll-view class="scroll" :scroll-y="true" v-else> -->
			<view class="order-card-list" v-else>
				<container
					class="content"
					:isFixed="false"
					:isNoData="isRefundNodata"
					:isLoading="refundLoading"
					@btnClick="getRefundList"
					:nodataOption="{
						type: 'hasbtn',
						iconBottom: '40rpx',
						text: '无数据',
						btnText: '刷新'
					}"
				>
					<view class="order-card" v-for="item in refundList" :key="item.id">
						<view class="head">
							<view class="order-info" @click="checkRefundDetail(item)">
								<text class="num" >服务单号 : {{ item.refundNo }}</text>
								<text class="date">时间 : {{ item.createTime }}</text>
							</view>

							<view class="status" @click="checkRefundDetail(item)">
								<text>{{ getRefundTypeText(item.serveType) }}</text>
								<text>{{ getRefundStatusText(item.refundState) }}</text>
							</view>
						</view>
						<view class="body">
							<!-- <navigator class="good-item" :url="'/pages/goods/goods?id='+goodItem.id+'name=' + goodItem.goodsName" hover-class="none" :key="goodItem.id" v-for="(goodItem, index) in item.goodsList"> -->
							<view class="good-item" :key="goodItem.id" v-for="(goodItem, index) in item.refundGoods">
								<goods-item
									type="cross"
									:name-size="36"
									:name-row-num="2"
									:good-num="goodItem.refundCount"
									:img="imgHost + goodItem.goodsPic"
									:img-width="'150rpx'"
									:img-height="'200rpx'"
									:price="goodItem.goodsPrise"
									:name="goodItem.goodsName"
								></goods-item>
							</view>
							<!-- </navigator> -->
						</view>
						<view class="foot">
							<view class="numerical">
								<!-- <text class="total">
								共{{ item.goodsCounts }}
								件商品</text>
							<view class="sumpay">
								<text class="label">支付总额:</text>
								<text class="symbol">¥</text>
								<text class="num">{{ item.orderPrice }}</text>
							</view> -->
							</view>
							<button class="btn btn-orange-line check-btn" @click="checkRefundDetail(item)">查看详情</button>
						</view>
					</view>
				</container>
			</view>
			<!-- </scroll-view> -->
		</mescroll-uni>
	</view>
</template>

<script>
import goodsItem from '../../components/goods-item/goods-item.vue';
import wybTabs from '@/components/wyb-tabs/wyb-tabs.vue';
import container from '@/components/container/container.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		container,
		wybTabs,
		goodsItem
	},
	data() {
		return {
			orederLoading: false,
			refundLoading: false,
			imgHost: this.$imgHost,
			currentTab: 0,
			serveTypes: this.$store.state.aftersaleModule.serveTypes,
			tabs: this.$store.state.orderModule.orderStatus,
			aftersaleStatus: this.$store.state.aftersaleModule.aftersaleStatus,
			// [
			// 	{
			// 		label: '全部',
			// 		val:-1
			// 	},
			// 	{
			// 		label: '待付款',
			// 		val:0
			// 	},
			// 	{
			// 		label: '待发货',
			// 		val:1
			// 	},
			// 	{
			// 		label: '待收货',
			// 		val:2
			// 	},
			// 	{
			// 		label: '已完成',
			// 		val:3
			// 	},
			// 	{
			// 		label: '退款／售后',
			// 		val:4
			// 	},
			// 	{
			// 		label: '已关闭',
			// 		val:5
			// 	}
			// ],
			// goodList: [
			// 	{
			// 		img: '/static/pic4.png',
			// 		price: 3199,
			// 		orgprice: 3299,
			// 		name: '华为po30',
			// 		moneySymbol: '¥',
			// 		content: 'Huawei/华为MatePad Pro平板电脑笔记本二合一新品轻薄全面屏影音无线充电'
			// 	}
			// ],
			orderPageNum: 1, //页码
			orderPageSize: 10, //每页数量
			orderPageTotal: null, //总数
			orderList: [
				// 订单列表
				// address: "榄树排东街12巷3号"
				// beginTime: null
				// billType: 0
				// billwayNo: null
				// buyAddressId: null
				// buyId: 3
				// buyNickname: "18202074132"
				// calcelDetaila: null
				// calcelId: null
				// city: "广州市"
				// county: "黄埔区"
				// createBy: "18202074132"
				// createTime: "2021-01-13 06:14:56"
				// endTime: null
				// fastMail: null
				// goodsCounts: 1
				// goodsList: null
				// goodsPrice: 100
				// id: "9"
				// iphone: "18202074132"
				// jpOrdersInvoice: null
				// logList: null
				// messageInfo: ""
				// orderFreight: null
				// orderNo: "6748259010446622720"
				// orderPrice: 100
				// orderState: 0
				// params: {}
				// payType: 0
				// pickType: 0
				// province: "广东省"
				// remark: null
				// returnType: 0
				// searchValue: null
				// stockType: 0
				// takeName: null
				// updateBy: ""
				// updateTime: null
				// goodList:[
				// {
				// 	buyCount: 1
				// 	createBy: "18202074132"
				// 	createTime: "2021-01-13 08:37:19"
				// 	goodsId: 8
				// 	goodsName: "十万个为什么 上册"
				// 	goodsPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
				// 	goodsPrise: 100
				// 	id: 10
				// 	orderId: null
				// 	orderNo: "6748294843593654272"
				// 	params: {}
				// 	remark: null
				// 	searchValue: null
				// 	totalMoney: 100
				// 	updateBy: ""
				// 	updateTime: null
				// }
				// ]
			],
			refundPageNum: 1, //页码
			refundPageSize: 10, //每页数量
			refundPageTotal: null, //总数
			refundList: [
				// 售后列表
			]
		};
	},
	computed: {
		isNodata() {
			return this.orderList.length < 1 && this.refundList.length < 1;
		},
		isOrderNodata() {
			return this.orderList.length < 1;
		},
		isRefundNodata() {
			return this.refundList.length < 1;
		}
	},
	methods: {
		init() {
			let works = [];
			// this.loading = true;

			if (this.currentTab != 5) {
				// 订单
				this.orederLoading = true;
				this.orderPageNum = 1; //页码
				this.orderPageSize = 10; //每页数量
				this.getOrderList()
					.then(res => {
						this.orederLoading = false;
						// let data = res.data.rows;

						// this.mescroll.endSuccess(data.length, true);
					})
					.catch(err => {
						this.orederLoading = false;
					});
			} else {
				this.refundLoading = true;
				this.refundPageNum = 1; //页码
				this.refundPageSize = 10; //每页数量
				this.getRefundList()
					.then(res => {
						this.refundLoading = false;
						// let data = res.data.rows;

						// this.mescroll.endSuccess(data.length, true);
					})
					.catch(err => {
						this.refundLoading = false;
					});
			}

			// works.push(this.getOrderList());
			// works.push(this.getRefundList());
			// Promise.all(works)
			// 	.then(res => {
			// 		// this.loading = false;
			// 		this.orederLoading = false;
			// 		this.refundLoading = false;
			// 	})
			// 	.catch(err => {
			// 		this.orederLoading = false;
			// 		this.refundLoading = false;
			// 	});
		},
		downLoad() {
			// 下拉刷新
			this.mescroll.resetUpScroll();
			if (this.currentTab != 5) {
				// 订单
				this.orderPageNum = 1; //页码
				this.orderPageSize = 10; //每页数量
				this.getOrderList()
					.then(res => {
						console.log('下拉刷新');

						// let data = res.data.rows;
						// this.mescroll.endSuccess(data.length, true);
					})
					.catch(err => {
						// this.mescroll.endErr();
					});
			} else {
				// 退货单
				this.refundPageNum = 1; //页码
				this.refundPageSize = 10; //每页数量
				this.getRefundList()
					.then(res => {
						// let data = res.data.rows;
						// this.mescroll.endSuccess(data.length, true);
					})
					.catch(err => {
						// this.mescroll.endErr();
					});
			}
		},
		upLoad() {
			// 上拉加载
			console.log('上拉加载');

			if (this.currentTab != 5) {
				// 订单
				this.orderPageNum++;
				this.getOrderList()
					.then(res => {
						let data = res.data.rows;
						// if (this.orderPageTotal != null && this.orderPageNum * this.orderPageSize < this.orderPageTotal) {
						// 	console.log('加载');
						// 	this.mescroll.endSuccess(data.length, true);
						// } else {
						// 	console.log('不加载');
						// 	this.mescroll.endSuccess(data.length, false);
						// }
					})
					.catch(err => {
						// this.mescroll.endErr();
					});
			} else {
				// 退货单

				this.getRefundList()
					.then(res => {
						let data = res.data.rows;
						// if (this.refundPageTotal != null && this.refundPageNum * this.refundPageSize < this.refundPageTotal) {
						// 	console.log('加载');
						// 	this.mescroll.endSuccess(data.length, true);
						// } else {
						// 	console.log('不加载');
						// 	this.mescroll.endSuccess(data.length, false);
						// }
					})
					.catch(err => {
						// this.mescroll.endErr();
					});
			}
		},
		getOrderStatusText(status) {
			let item = this.$Lodash.find(this.tabs, {
				val: status
			});
			if (item) return item.label;
			else return '';
		},
		getRefundTypeText(status) {
			let item = this.$Lodash.find(this.serveTypes, {
				val: status
			});
			if (item) return item.label;
			else return '';
		},
		getRefundStatusText(status) {
			let item = this.$Lodash.find(this.aftersaleStatus, {
				val: status
			});
			if (item) return item.label;
			else return '';
		},
		tabChange(event) {
			this.currentTab = event.index;
			console.log('tabChange', event);
			if(this.mescroll&&this.mescroll.resetUpScroll)
			this.mescroll.resetUpScroll();
			if (this.currentTab != 5) {
				// 订单
				this.orederLoading = true;
				this.orderPageNum = 1; //页码
				this.orderPageSize = 10; //每页数量
				this.getOrderList()
					.then(res => {
						this.orederLoading = false;
						// let data = res.data.rows;

						// this.mescroll.endSuccess(data.length, true);
					})
					.catch(err => {
						this.orederLoading = false;
					});
			} else {
				this.refundLoading = true;
				this.refundPageNum = 1; //页码
				this.refundPageSize = 10; //每页数量
				this.getRefundList()
					.then(res => {
						this.refundLoading = false;
						// let data = res.data.rows;

						// this.mescroll.endSuccess(data.length, true);
					})
					.catch(err => {
						this.refundLoading = false;
					});
			}
		},
		checkOrderDetail(item) {
			// 查看订单详情
			uni.navigateTo({
				url: `/pages/order/order-detail?id=${item.id}&orderNo=${item.orderNo}`
			});

			// uni.navigateTo({
			// 	url: '/pages/aftersale/aftersale-detail'
			// });
		},
		checkRefundDetail(item) {
			// 查看售后详情
			uni.navigateTo({
				url: `/pages/aftersale/aftersale-detail?id=${item.id}&refundNo=${item.refundNo}`
			});

			// uni.navigateTo({
			// 	url: '/pages/aftersale/aftersale-detail'
			// });
		},
		getOrderList() {
			// this.orederLoading = true;
			return new Promise((resolve, reject) => {
				this.$store
					.dispatch('getOrderList', {
						status: this.tabs[this.currentTab].val,
						pageNum: this.orderPageNum, //页码
						pageSize: this.orderPageSize //每页数量
					})
					.then(res => {
						console.log('获取订单列表成功', res);
						// this.orederLoading = false;
						let data = res.data;
						this.orderPageTotal = data.total;
						if (this.orderPageNum == 1) this.orderList = data.rows;
						else this.orderList = [...this.orderList, ...data.rows];
						if (this.orderPageTotal != null && this.orderPageNum * this.orderPageSize < this.orderPageTotal) {
							console.log('加载');
							this.mescroll.endSuccess(data.rows.length, true);
						} else {
							console.log('不加载', data.rows.length);
							this.mescroll.endSuccess(data.rows.length, false);
						}

						resolve(res);
					})
					.catch(err => {
						this.mescroll.endErr();
						reject(err);
					});
			});
		},
		getRefundList() {
			// this.refundLoading = true;
			return new Promise((resolve, reject) => {
				this.$store
					.dispatch('getOrderRefundList', {
						pageNum: this.refundPageNum, //页码
						pageSize: this.refundPageSize //每页数量
					})
					.then(res => {
						console.log('获取售后列表成功', res);
						// this.refundLoading = false;
						let data = res.data;
						this.refundPageTotal = data.total;
						if (this.refundPageNum == 1) this.refundList = data.rows;
						else this.refundList = [...this.refundList, ...data.rows];
						if (this.refundPageTotal != null && this.refundPageNum * this.refundPageSize < this.refundPageTotal) {
							console.log('加载');
							this.mescroll.endSuccess(data.rows.length, true);
						} else {
							console.log('不加载', data.rows.length);
							this.mescroll.endSuccess(data.rows.length, false);
						}
						resolve(res);
					})
					.catch(err => {
						this.mescroll.endErr();
						reject(err);
					});
			});
		},
		goToPay(item) {
			// 去支付
			let goodList = [];
			goodList = item.goodsList.map(item => {
				return {
					goodsId: item.goodsId,
					commodityName: item.goodsName,
					commodityPic: item.goodsPic,
					sellPrice: item.goodsPrise,
					buyCount:item.buyCount,
					// postage:item.postage,
					// freeMailStatus:item.freeMailStatus
				};
			});
			this.$store.commit('setBuyGoods', goodList);

			uni.navigateTo({
				url: `/pages/order/order-place?type=continue&orderNo=${item.orderNo}&orderFreight=${item.orderFreight}`
			});
		}
	},
	onLoad(option) {
		if (option.currentTab) this.currentTab = parseInt(option.currentTab);
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.order-list {
	width: 100%;
	height: 100%;
	// flex: 1;
	box-sizing: border-box;
	// background-color: #fff;
	display: flex;
	flex-direction: column;
	.tabs {
		// padding: 14rpx 0rpx;
		background-color: #fff;
	}
	.scroll {
		// flex: 1;
		height: calc(100% - 80rpx);
	}
	.order-card-list {
		padding: 20rpx;
		.order-card {
			background-color: #fff;
			border-radius: 6px;
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 26rpx;
				border-bottom: 2rpx solid #cccfd3;

				.order-info {
					color: #626679;
					display: flex;
					flex-direction: column;
					font-size: 30rpx;
				}
				.status {
					display: flex;
					flex-direction: column;
					text-align: center;
					font-size: 34rpx;
					color: #ffbc66;
				}
			}
			.body {
				padding: 20rpx;
				border-bottom: 2rpx solid #cccfd3;
				.good-item:nth-last-child(n + 2) {
					margin-bottom: 20rpx;
				}
			}
			.foot {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx 26rpx;
				.numerical {
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.symbol {
						margin-left: 20rpx;
					}
					.total {
						color: #8c8e9c;
						margin-right: 30rpx;
					}
					.sumpay {
						.num {
							font-weight: bolder;
							// margin-left: 20rpx;
						}
					}
				}
				.pay-btn {
					font-size: 32rpx;
					padding: 12rpx 20rpx;
					border-radius: 100px;
				}
				.check-btn {
					font-size: 32rpx;
					padding: 12rpx 20rpx;
					border-radius: 100px;
				}
			}
		}

		.order-card:nth-child(n + 2) {
			margin-top: 20rpx;
		}
	}
	.good-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		.item {
			width: 48%;
		}
	}
}
</style>
<style>
/* 修改最外层容器样式 */
/* #ifdef H5 */
.uni-body {
}
uni-page-body {
	height: 100%;
}
/* #endif */

/* #ifdef MP */
page {
	height: 100%;
}
/* #endif */
</style>
